<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <%
        String contextPath = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + contextPath + "/";
    %>
    <base href="<%=basePath%>">
    <meta name="referrer" content="unsafe-url"/>
    <meta charset="UTF-8">
    <title>头部界面</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index/index.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style>
        .user_center_ul li a:hover {
            color: cornflowerblue;
        }

        li {
            color: cornflowerblue;
        }

        .on {
            background: #347bda;
        }
    </style>
</head>
<!-- 头部 start -->
<body>
<div class="top_banner" style="margin-left: 10px;">
    <img src="images/top_banner.jpg" alt="">
</div>
<div class="shortcut">
    <ul>
        <c:choose>
            <c:when test="${empty user}">
                <!-- 未登录状态 -->
                <li><a href="pages/common/login.jsp" target="_blank">登录</a></li>
                <li><span>|</span></li>
                <li><a href="pages/common/register.jsp" target="_blank">注册</a></li>
            </c:when>
            <c:otherwise>
                <!-- 登录状态 -->
                <li><a href="javascript:location.href='user/exit';">退出</a></li>
                <li><span>|</span></li>
                <li><a href="pages/user_center/myfavorite.jsp">我的收藏</a></li>
                <li>

                    <a href="pages/user_center/index.jsp" id="headImg">
                        <img src='${user.headImg}'
                             style="height: 38px;width: 38px;-webkit-border-radius: 36px;-moz-border-radius: 36px;border-radius: 36px;"/>
                    </a>
                    <ul class="user_center_ul" id="user_center_ul" style="display: none;">
                        <li><a href="pages/user_center/index.jsp">我的首页</a></li>
                        <li><a href="pages/user_center/sight_order.jsp">我的订单</a></li>
                        <li><a href="pages/user_center/my_collect.jsp">我的收藏</a></li>
                        <li><a href="pages/user_center/my_comment.jsp">我的点评</a></li>
                        <li><a href="pages/user_center/update_info.jsp">账号管理</a></li>
                    </ul>

                </li>

            </c:otherwise>
        </c:choose>
    </ul>
</div>
<div class="header_wrap">
    <div class="topbar">
        <div class="logo">
            <a href="index.jsp">
                <img src="images/logo.png" alt="">
            </a>
        </div>
        <div class="search">
            <input name="search_input" id="search_input" type="text" placeholder="请输入景点名称" class="search_input"
                   autocomplete="off">
            <a id="search_btn" class="search-button"><img src="images/搜索.png"
                                                          style="height: 35px; width: 35px;"></a>
        </div>
        <div class="hottel">
            <div class="hot_pic">
                <img src="images/hot_tel.jpg" alt="">
            </div>
            <div class="hot_tel"  style="margin-left: 260px;">
                <p class="hot_time">客服热线(9:00-22:00)</p>
                <p class="hot_num">400-641-2093</p>
            </div>
        </div>
    </div>
</div>
<!-- 头部 end -->
<!-- 首页导航 -->
<div class="navitem" id="nav">
    <ul id="category" class="nav">
        <li class="active" id="index">
            <a href="index.jsp">首页</a>
        </li>
        <li id="ticket">
            <a href="pages/sight/ticket.jsp">门票</a>
        </li>
        <li id="flight">
            <a href="pages/flight/oneWay.jsp">机票</a>
        </li>
        <li id="travel_tips">
            <a href="pages/travel_tips.jsp">旅游攻略</a>
        </li>
        <li id="favorite_rank">
            <a href="pages/sight/favorite_rank.jsp">收藏排行榜</a>
        </li>

    </ul>
</div>

<script src="js/getParameter.js"></script>
<script>
    $("#search_btn").click(function () {
        var input = $("#search_input").val();
        if (input == "") {
            return false;
        }
        location.href = "ticket.jsp?search=" + input;
    });
</script>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/user_center/person_center.js"></script>
<script>
    $(function () {
        // 导航栏ul标签中为每一个a标签添加一个事件，点击后改变背景颜色
        $("#category li a").each(function () {
            var url = window.location.href;
            // 获取当前页的地址
            var indexUrl = url.split('/')[url.split('/').length - 1];
            var currentUrl = url.substr(url.indexOf("pages"));

            if (indexUrl == "") {
                $("#index").addClass("on").siblings().removeClass("on");
            }
            if ($(this).attr('href') == currentUrl || $(this).attr('href') == indexUrl) {
                $(this).css("color", "white");
                $(this).addClass("on").siblings().removeClass("on");
            }
        });

        var search = getParameter("search");
        // 对search进行解码
        var searchVal = decodeURI(search);
        if (searchVal == "null") {
            searchVal = "";
        }
        $("#search_input").val(searchVal);

        /* 导航栏随鼠标滑动而改变位置 */
        $(window).scroll(function () {
            if ($(document).scrollTop() >= 272) {
                $("#nav").addClass("navitem_fixed").slideDown("slow");
            } else {
                $("#nav").removeClass("navitem_fixed");
                $("#nav").addClass("navitem");
                $("#category").css("margin-top", "-0px");
            }
        });

    });

</script>
</body>
</html>
